<template>
  <view class="tab-bar" :class="themeClass" :style="tabBarStyle">
    <view
      class="tab-item"
      v-for="(item, index) in tabList"
      :key="index"
      :class="{ active: current === index }"
      @click="switchTab(index)"
    >
      <view class="tab-icon">
        <uni-icons
          :type="current === index ? item.iconActive : item.icon"
          :size="22"
          :color="current === index ? activeColor : inactiveColor"
        ></uni-icons>
        <view v-if="item.badge" class="tab-badge">{{ item.badge }}</view>
      </view>
      <text class="tab-text" :style="{ color: current === index ? activeColor : inactiveColor }">
        {{ item.text }}
      </text>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '@/store/user'

export default {
  name: 'TabBar',
  props: {
    current: {
      type: Number,
      default: 0
    }
  },
  setup() {
    const userStore = useUserStore()
    return {
      userStore
    }
  },
  data() {
    return {
      tabList: [
        {
          text: '首页',
          icon: 'home',
          iconActive: 'home-filled',
          path: '/pages/index/index',
          badge: ''
        },
        {
          text: '日记',
          icon: 'compose',
          iconActive: 'compose',
          path: '/pages/diary/list',
          badge: ''
        },
        {
          text: '写日记',
          icon: 'plus',
          iconActive: 'plus-filled',
          path: '/pages/diary/edit',
          badge: ''
        },
        {
          text: '分类',
          icon: 'folder',
          iconActive: 'folder-add-filled',
          path: '/pages/category/list',
          badge: ''
        },
        {
          text: '我的',
          icon: 'person',
          iconActive: 'person-filled',
          path: '/pages/profile/index',
          badge: ''
        }
      ]
    }
  },
  computed: {
    isDark() {
      return this.userStore?.themeMode === 'dark'
    },
    
    themeClass() {
      return this.isDark ? 'theme-dark' : 'theme-light'
    },
    
    activeColor() {
      return '#1890ff'
    },
    
    inactiveColor() {
      return this.isDark ? '#b3b3b3' : '#666666'
    },
    
    backgroundColor() {
      return this.isDark ? '#252526' : '#ffffff'
    },
    
    borderColor() {
      return this.isDark ? '#404040' : '#e5e5e5'
    },
    
    tabBarStyle() {
      return {
        backgroundColor: this.backgroundColor,
        borderTopColor: this.borderColor
      }
    }
  },
  
  watch: {
    'userStore.themeMode': {
      handler(newTheme) {
        // 让Vue的响应式系统自动处理更新
      },
      immediate: false
    }
  },
  
  methods: {
    switchTab(index) {
      if (index === this.current) return
      
      const tabItem = this.tabList[index]
      
      // 写日记页面使用navigateTo
      if (index === 2) {
        uni.navigateTo({
          url: tabItem.path
        })
      } else {
        uni.switchTab({
          url: tabItem.path
        })
      }
      
      this.$emit('change', index)
    }
  }
}
</script>

<style scoped>
.tab-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  border-top: 1px solid;
  z-index: 998;
  transition: all 0.3s ease;
  /* #ifdef MP-WEIXIN */
  padding-bottom: env(safe-area-inset-bottom);
  /* #endif */
}

.theme-light {
  background-color: #ffffff;
  border-top-color: #e5e5e5;
}

.theme-dark {
  background-color: #252526 !important;
  border-top-color: #404040 !important;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
  position: relative;
  transition: all 0.2s;
}

.theme-light .tab-item.active {
  background-color: rgba(24, 144, 255, 0.05);
}

.theme-dark .tab-item.active {
  background-color: rgba(24, 144, 255, 0.1);
}

.tab-icon {
  position: relative;
  margin-bottom: 8rpx;
}

.tab-badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background-color: #ff4d4f;
  color: #ffffff;
  font-size: 20rpx;
  min-width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  border-radius: 16rpx;
  padding: 0 8rpx;
}

.tab-text {
  font-size: 20rpx;
  line-height: 1;
  transition: color 0.2s;
}
</style> 